<template>
    <el-col :span="16" :offset="0">
        <el-card shadow="always" :body-style="{ padding: '20px' }" v-loading="loading">
            <!-- card body -->
            <el-table :data="actives" width="100%" height="400px">
                <el-table-column 
                    prop="id"
                    label="ID"
                    width="100px">
                </el-table-column>
                <el-table-column 
                    prop="image"
                    label="图片"
                    width="200px">
                    <template #default="scope">
                        <img :src="scope.row.image" class="item-img">
                    </template>
                </el-table-column>
                <el-table-column 
                    prop="image_url"
                    label="跳转链接"
                    width="100px">
                    <template #default="scope">
                        <el-tooltip effect="dark" :content="scope.row.image_url" placement="top-start">
                            <el-button type="text" size="small" @click="showPage(scope.row.image_url)">点击查看链接</el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column 
                    label="操作"
                    width="100px">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="showDialog(scope.row)">修改</el-button>
                        <el-dialog title="banner 修改" v-model="scope.row.showEditDialog" >
                            <el-form v-loading="editTempForm.editLoading">
                                <el-form-item label="图片" label-width="80px">
                                    <el-input placeholder="上传或链接" v-model="editTempForm.image" size="small" clearable></el-input>
                                    <el-upload
                                    action="http://localhost/api/upload"
                                    :on-remove="handleRemove"
                                    :on-success="handleUploadSuccess"
                                    >
                                        <el-button type="text" size="large">
                                            <i class="el-icon-upload"></i>
                                        </el-button>
                                        <template #tip>只能上传图片，不能超过1M</template>
                                    </el-upload>
                                </el-form-item>
                                <el-form-item label="跳转链接" label-width="80px">
                                    <el-input v-model="editTempForm.image_url" autocomplete="off" size="small" clearable></el-input>
                                </el-form-item>
                            </el-form>
                            <template #footer>
                                <span class="dialog-footer">
                                <el-button @click="cancelEdit(scope.row)">取 消</el-button>
                                <el-button type="primary" @click="confirmEdit(scope.row)">确 定</el-button>
                                </span>
                            </template>
                        </el-dialog>
                        <el-button type="text" size="small" @click="delActive(scope)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
                    
        </el-card>
    </el-col>
</template>

<script>
import { adminImg } from '@/api/content.js'
import { mapMutations, mapState } from 'vuex'
export default {
    name: 'ActiveTable',
    data(){
        return{
            loading: false,
             editTempForm: {
                image: "",
                image_url: "",
                editLoading: false,
            }
        }
    },
    methods: {
        ...mapMutations('ai', [
            'getActives',
            'spliceActive'
        ]),
        showPage(url){
            window.open(url);
        },
        showDialog(row){
            this.editTempForm.image = row.image
            this.editTempForm.image_url = row.image_url
            row.showEditDialog = true
        },
        async confirmEdit(row){
            this.editTempForm.editLoading = true
            row.image = this.editTempForm.image
            row.image_url = this.editTempForm.image_url
            let data = await adminImg.active.edit({
                id: row.id,
                image: row.image,
                image_url: row.image_url,
            })
            this.editTempForm.editLoading = false
            console.log('data', data)
            row.showEditDialog = false
            this.editTempForm.image = ""
            this.editTempForm.image_url = ""
            this.$message({
                showClose: true,
                type: "success",
                message: "修改成功",
            })
        },
        cancelEdit(row){
            this.editTempForm.image = ""
            this.editTempForm.image_url = ""
            row.showEditDialog = false
        },
        async delActive(scope){
            this.loading = true
            let data = await adminImg.active.del(scope.row.id)
            let index = scope.index_
            this.loading = false
            if(data){
                this.$message({
                    showClose: true,
                    type: "success",
                    message: "删除成功"
                })
                this.spliceActive(index)
            }else{
                this.$message({
                    showClose: true,
                    type: "error",
                    message: "删除失败"
                })
            }


        },
        handleUploadSuccess(response){
            if(response.status == 200){
                this.$message({
                    showClose: true,
                    message: "上传成功",
                    type: 'success'
                });
                this.editTempForm.image = response.url
            }
        },
        handleRemove(){
            
        },
    },
    computed: {
        ...mapState('ai', [
            'actives'
        ])
    },
    created(){
        this.getActives();
    }
}
</script>

<style lang="scss" scoped>
.item-img {
    width: 100%;
    height: 100px;
    object-fit: contain;
}

.el-table {
    /deep/ .el-table__body-wrapper {
        overflow: auto !important;
    }
}
</style>
